<template>
  <div>
    <Search></Search>
    <div class="but-two">
      <el-tooltip class="item" effect="light" content="全屏" placement="left">
        <div class="but-item" @click="fullFn" v-show="isShow">
          <i class="iconfont icon-quanping"></i>
        </div>
      </el-tooltip>
      <el-tooltip
        class="item"
        effect="light"
        content="返回顶部"
        placement="left"
      >
        <div class="but-item" @click="topFn" v-show="isShow">
          <i class="el-icon-arrow-up"></i>
        </div>
      </el-tooltip>
    </div>

    <div class="main-box">
      <div class="mains">
        <el-container>
          <el-aside>
            <Timer></Timer>
            <Phrase></Phrase>
            <Weather :wea="this.weather"></Weather>
          </el-aside>
          <el-main>
            <Chart></Chart>
            <Notes></Notes>
            <Collect></Collect>
          </el-main>
        </el-container>
      </div>
    </div>

    <div class="fool">
      <div class="link-niko">
        <el-link
          href="https://github.com/needdd?tab=repositories"
          type="warning"
          :underline="false"
          >GitHub <i class="iconfont icon-github"></i></el-link
        >|<el-link
          href="http://mail.qq.com/cgi-bin/qm_share?t=qm_mailme&email=1162837225@qq.com"
          type="warning"
          :underline="false"
          >QQ邮箱 <i class="iconfont icon-qq"></i></el-link
        >|<el-link
          href="http://mail.qq.com/cgi-bin/qm_share?t=qm_mailme&email=1162837225@qq.com"
          type="warning"
          :underline="false"
          >Gitee <i class="iconfont icon-gitee"></i
        ></el-link>
      </div>
      <div class="text-niko">Copyright © NIKO</div>
    </div>
  </div>
</template>

<script>
import Search from '@/components/Widget/search.vue'
import Timer from '@/components/Widget/timer.vue'
import Phrase from '@/components/Widget/phrase.vue'
import { get } from '@/api/axios.js'
import Weather from '../../components/Widget/weather.vue'
import Collect from '@/components/content/collect.vue'
import Chart from '@/components/content/chart.vue'
import Notes from '@/components/content/notes.vue'
export default {
  data() {
    return {
      isShow: false,
      lastIp: '',
      weather: ''
    }
  },
  methods: {
    async getWeather() {
      const res = await get({ ip: this.lastIp })
      if (res.status !== 200) return
      this.weather = res.data
    },
    fullFn() {
      document.documentElement.requestFullscreen()
    },
    topFn() {
      document.body.scrollIntoView({ block: 'start', behavior: 'smooth' })
    }
  },

  created() {
    this.lastIp = window.returnCitySN.cip
    this.getWeather()
  },

  mounted() {
    window.onscroll = () => {
      if (document.documentElement.scrollTop + document.body.scrollTop > 100) {
        this.isShow = true
      } else {
        this.isShow = false
      }
    }
  },
  components: { Search, Timer, Phrase, Weather, Collect, Chart, Notes }
}
</script>

<style lang="less" scoped>
@import url(../../icon/iconfont/iconfont.css);
.but-two {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: fixed;
  bottom: 10vh;
  right: 1vw;
}
.hight {
  height: 1000px;
}
.but-item {
  border-radius: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 35px;
  width: 35px;
  background-color: #4e7ca1;
  margin-top: 6px;
  cursor: pointer;
}
.but-item:hover {
  background-color: #5283ac;
}
.el-icon-arrow-up {
  color: #e0e0e0;

  font-size: 18px;
}
.icon-quanping {
  color: #e0e0e0;

  font-size: 18px;
}
.mains {
  margin-top: 10px;
  // height: 500px;
  width: 65%;
  // background-color: rgb(170, 126, 126);
}
.main-box {
  background-image: linear-gradient(-60deg, #c08eaf, #57c3c2);
  width: 100%;
  display: flex;
  justify-content: center;
}
.el-aside {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 15px;

  // background-color: rgb(132, 117, 216);
}
.el-main {
  // background-color: rgb(83, 148, 102);
}
.fool {
  border-top: ;
  background-color: #ffffff;
  padding: 30px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  .el-link {
    margin: 0 5px;
  }
  .text-niko {
    margin-top: 10px;
    font-size: 14px;
  }
}
.link-niko {
  color: #f19790;
}
</style>
